<template>
  <view class="help-center-detail">
    <header-vue :back="true"  bgColor="transparent"></header-vue>

    <view class="background-image">
      <image :src="IMAGE_URL+'/static/master/help-bg.png'" mode="aspectFill" class="bg-img"></image>
    </view>
    <view class="content">
      <view class="detail-title">{{ problemData.title }}</view>
      <view class="detail-card">
        <view class="detail-content">{{ problemData.content }}</view>
        <u-image
          :src="problemData.image"
          mode="aspectFill"
          width="100%"
          height="566rpx"
          radius="20rpx"
        ></u-image>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from '@/config/app.js';
export default {
  data() {
    return {
       IMAGE_URL: appConfig.IMAGE_URL,
      problemId: 1,
      problemData: {},
    };
  },
  components: {
    headerVue,
  },
  onLoad(options) {
    this.problemId = options.problemId || 1;
    this.setProblemData();
  },
  methods: {
    setProblemData() {
      const problems = {
        1: {
          title: "订单发布后没人接是什么情况?",
          content:
            "订单发布后无人接单，可能因价格缺乏吸引力、任务难度大、信息描述不清晰等。可适当提高报酬，详细说明任务要求、时间、地点等信息;选择更活跃、匹配度高的平台发布;若为紧急订单，可设置加急奖励，或拆分复杂任务，提高接单概率。",
          image: "/static/images/problem1.jpg",
        },
        2: {
          title: "一直给我派的都是低价订单怎么办?",
          content:
            "如果系统一直给您分配低价订单，可能是由于您的接单偏好设置、历史接单记录或所在区域订单分布等因素影响。建议您检查并调整接单偏好设置，提高接单评分，尝试在不同时间段接单，或联系客服反馈问题，以获得更合适的订单分配。",
          image: "/static/images/problem2.jpg",
        },
      };

      this.problemData = problems[this.problemId] || problems[1];
    },
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.help-center-detail {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  // 背景图片容器
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    .bg-img {
      width: 100%;
      height: 100%;
    }
  }

  .content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 0 32rpx;
      z-index: 1; // 确保内容在背景之上
    .detail-card {
      width: 100%;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 28rpx;
    }

    .detail-title {
      font-weight: 500;
      font-size: 44rpx;
      color: #222222;
      margin-bottom: 28rpx;
    }

    .detail-content {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 20rpx;
    }

    .cat-image {
      width: 100%;
      height: 566rpx;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
    }
  }
}
</style>
